<template>
  <div class="query-result">
    <a-row :gutter="16">
      <a-col :span="16">
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="{ pageSize: 10 }"
          :scroll="{ y: 400 }"
        >
        </a-table>
      </a-col>
      <a-col :span="8">
        <div ref="pieChartRef" style="height: 400px"></div>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  queryData: {
    type: Object,
    required: true
  },
  queryType: {
    type: String,
    required: true
  }
});

const columns = [
  {
    title: '损坏链路名称',
    dataIndex: 'linkName',
    key: 'linkName',
  },
  {
    title: '恢复状态',
    dataIndex: 'status',
    key: 'status',
    sorter: (a, b) => a.status - b.status,
    render: (status) => {
      let text = '';
      let color = '';
      if (status === 1) {
        text = '已恢复';
        color = 'green';
      } else if (status === 2) {
        text = '不受影响';
        color = 'blue';
      } else {
        text = '未恢复';
        color = 'red';
      }
      return h('a-tag', { color }, text);
    }
  }
];

const tableData = ref([]);
const pieChartRef = ref(null);
let pieChart = null;

// 处理数据
const processData = (data) => {
  const result = [];
  const stats = {
    unrecovered: 0,
    recovered: 0,
    unaffected: 0
  };

  if (!data) return;

  // 处理统计数据
  if (data['未恢复'] !== undefined) stats.unrecovered = data['未恢复'];
  if (data['已恢复'] !== undefined) stats.recovered = data['已恢复'];
  if (data['不受影响'] !== undefined) stats.unaffected = data['不受影响'];

  // 处理链路数据
  Object.entries(data).forEach(([key, value]) => {
    // 跳过统计数据
    if (['未恢复', '已恢复', '不受影响'].includes(key)) return;

    if (props.queryType === 'single') {
      result.push({
        key: key,
        linkName: key,
        status: value
      });
    } else {
      // 处理双纤轮询数据
      const links = key.replace(/[\[\]]/g, '').split(', ');
      result.push({
        key: key,
        linkName: links.join(' 和 '),
        status: value
      });
    }
  });

  tableData.value = result;
  updatePieChart(stats);
};

// 更新饼图
const updatePieChart = (stats) => {
  if (!pieChart) return;

  const option = {
    title: {
      text: props.queryType === 'single' ? '单纤轮询结果' : '双纤轮询结果',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['未恢复', '已恢复', '不受影响']
    },
    series: [
      {
        name: '轮询结果',
        type: 'pie',
        radius: '50%',
        data: [
          { 
            value: stats.unrecovered, 
            name: '未恢复',
            itemStyle: { color: '#ff4d4f' }
          },
          { 
            value: stats.recovered, 
            name: '已恢复',
            itemStyle: { color: '#52c41a' }
          },
          { 
            value: stats.unaffected, 
            name: '不受影响',
            itemStyle: { color: '#1890ff' }
          }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

  pieChart.setOption(option);
};

// 监听数据变化
watch(() => props.queryData, (newData) => {
  if (newData) {
    processData(newData);
  }
}, { deep: true });

// 初始化图表
onMounted(() => {
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value);
    if (props.queryData) {
      processData(props.queryData);
    }
  }
});

// 组件卸载时销毁图表
onUnmounted(() => {
  if (pieChart) {
    pieChart.dispose();
  }
});
</script>

<style scoped>
.query-result {
  padding: 20px;
  max-height: 500px;
}
</style> 